在前面我們使用useffect和fetch()來取得資料，裡面包含了資料後續處理，例外狀況處理，和Loading顯示等等。

為了讓這個功能可以被重複利用，去抓取不同資料，我們可以額外把它寫成一個自訂的hook，也像是寫成一個額外的函式。

首先新增一個useFetch組件，由於是自訂義的hook，所以使用use開頭，引數傳入url，這樣就能隨意更改抓取的網址。

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [isPending, setIsPending] = useState(true);
  const [error, setError] = useState(null);

組件內容基本上是直接移出原本寫在home.js的useEffect，但最後的相依性改成url，這樣useEffect就會在url改變的時候執行。

  useEffect(() => {
    setTimeout(() => {
      fetch(url)
      .then(res => {
        if (!res.ok) { // error coming back from server
          throw Error('could not fetch the data for that resource');
        } 
        return res.json();
      })
      .then(data => {
        setIsPending(false);
        setData(data);
        setError(null);
      })
      .catch(err => {
        // auto catches network / connection error
        setIsPending(false);
        setError(err.message);
      })
    }, 1000);
  }, [url])

最後return 需要顯示的data error isPending 回 home.js

return { data, isPending, error };
}
 
export default useFetch;

就完成了一個自訂義的Hook

參考資料

Net ninja